<html>
<head>
	<meta charset="utf-8">
	<title>JavaScript 对象和数组(数组)</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="content" style="background-image: url(img/bg7.jpg);">
	<div class="box">
		<h2>JavaScript 数组（Array）</h2>
		<div class="font">同一个数组，每个元素都可以保存任何类型（没有类型限制），但我们使用时会进行分类，便于管理</div>
		<div class="example">arr=[1,"string",true,new Object(),[1,2,2]]</div>
		<ul class="first">
			<li>var arr = new Array();
				<div class="example">在用new Array()创建数组时，构造函数里只有一个参数，代表声明的是他的长度</div>
				<div class="font">该长度不仅可读，还能设置（arr.length = 100）</div>
			</li>
			<li>length属性获取长度：arr.length</li>
			<li>var arr = new Array();<br/>var arr = [10];
				<div class="font">前者代表数组长度为10（length=10）；后者代表数组中的一个值（length=1）</div>
			</li>
			<li>var arr = new Array(1,2,3,4,);
				<div class="font">若多加一个“,”，IE9以下浏览器把“,”之后识别为一个元素为undefined，其他报错。</div>
			</li>
			<li>
				<pre class="example">
					var arr = new Array(5);
					var arr[11] = 10;	
					alert(arr[11]);        //输出为10
					<div class="font">注意，此处6~10的位置都为undefined，即（数组为自动扩容）</div>
				</pre>
			</li>
			<h2>在这里我们插入一个冒泡排序</h2>
			<div class="font">冒泡排序的思想是，比较相邻两个数，如果前者大于后者，就把两个数交换位置；这样一来，第一轮就可以选出一个最大的数放在最后面；那么经过n-1轮，就完成了所有数的排序（一般按照自己想要的顺序）</div>
			<div class="example">还是先举个例子吧，形容不来</div>
			<pre class="example">

						按照从小到大排序
							     5,4,3,2,1
							   =>4,3,2,1,5
							   =>3,2,1,4,5
							   =>2,1,3,4,5
							   =>1,2,3,4,5

					function num(){
						var temp;
						for(var i = 0;i < arr.length;i++){
							for(var j = 0;j< arr.length-i-1 ; j++){
								if(arr[j] < arr[j+1]){
									temp = arr[j];
									arr[j] = arr[j+1];
									arr[j+1] = temp;
								}}
							}}

					var arr = [4,3,2,6,9];
					num(arr);
					alert(arr);      //输出结果 9,6,4,3,2
			</pre>

			<li><div class="font">对象和数组都有toString()、valueof()、toLocalString()方法<br/>都是返回对应的字符串</div></li>
			<li><div class="font">join方法（不会对原数组进行修改）</div>
				<pre class="example">
					var box = [1,2,3,4,5];
					document.write(box.join('$'));	
					//输出为 1$2$3$4$5
				</pre>
			</li>
			<li><div class="font">delete arr[下标]<br/>元素被删除，但位置保留，即数组长度不变</div></li>

		</ul>
		<h2>各种方法</h2>
		<ul class="first">
			<li>栈方法（栈是一种数据结构，后进先出）
				<ul class="second">
					<li>push()：可以接收任意数量的参数，向原数组末尾添加任意个数元素，返回值为添加后的数组长度
						<pre class="example">

						var box = [1,2,3];
						var len = box.push(4,5,6);
						document.write(box);         //输出结果为1,2,3,4,5,6
						document.write(len);		<span class="font">// 输出结果为9</span>
						</pre>
					</li>
					<li>pop()：移出数组末尾最后一个元素，并修改了length长度
						<pre class="example">

						var box = [1,2,3];
						var len = box.pop();
						document.write(box);         //输出结果为1,2
						document.write(len);		<span class="font">// 输出结果为3(返回被移除的元素)</span>
						</pre>
					</li>
				</ul>
			</li>
			<li>队列方法（先进先出）
				<ul class="second">
					<li>shift()：移除数组开头的元素<br/>并返回移除的元素</li>
					<li>unshift()：与shift()方法的功能<span class="font">完全相反</span><br/>为前端添加多个元素<br/>返回添加元素后数组的长度</li>
				</ul>
			</li>
			<li>重排序方法（栈是一种数据结构，后进先出）
				<ul class="second">
					<li>reverse()：将数组元素反序（逆序）<br/>返回修改后的数组字符串</li>
					<li>sort()：从小到大进行排序
						<ul class="second">
							<li>没有参数时，按照ASIⅡ字符顺序进行升序排列</li>
							<li>参数为一个函数（具体参考手册），返回修改后的数组形式的字符串</li>
						</ul>
					</li>
				</ul>

				<pre class="example">

						function demo(){
							return b-a;				//<span class="font">从大到小，若想从小到大排，a-b</span>
						}
						var box = [1,14,5,26,12];
						var str = box.sort(demo);
						=><span class="font">此时输出1,5,12,14,26；若无参数demo，则输出为1,12,14,26,5</span>
				</pre>
			</li>
			<li>操作方法<br/>
				<ul class="second">
					<li>concat():将一个或多个数组合并，并且返回合并后的新数组，不改变原数组
						<pre class="example">

							var box = new Array(1,2,3,4,5);
							var box2 = new Array(6,7);
							var str = box.concat(box,box);                //可以多个
							=> str：1,2,3,4,5,6,7,6,7
						    	    box:1,2,3,4
						</pre>
					</li>
					<li>slice():截取
						<pre class="example">

							var box = new Array(2,4,6,8,10);
							var str = box.slice(2);			//<span class="font">输出为6,8,10：当只有一个参数时，从当前下标开始截取到末尾，返回截取的一段</span>
							var str1 = box.slice(2,4);      //<span class="font">输出为6,8：当有两个参数时，从当前下标开始截取到第二个参数为止
											               不包括第二个参数的元素（前包后不包）</span>
						</pre>
					</li>
					<li>slice():
						<div class="font">删除功能：两个参数，第一个是删除的位置，第二个是删除数量，返回被删除的元素</div>
						<pre class="example">

							var box = new Array(1,2,3,4,5);
							var str = box.slice(2,2);               
							=> str：3,4
						    	    box:1,2,5
						</pre>
						<div class="font">插入功能：两个参数，第一个是控制插入的位置，第二个参数必须设置为0（为了保证不移出元素），之后可由一个或多个参数表示插入项目</div>
						<pre class="example">

							var box = new Array(1,2,3,4,5);
							var str = box.slice(2,0,4,5);               
							=> str：无显示
						    	    box:1,2,4,5,3,4,5
						</pre>
						<div class="font">替换功能：两个参数，第一个是控制替换的位置，第二个参数控制替换的个数，之后替换的参数个数与第二个参数保持一致</div>
						<pre class="example">

							var box = new Array(1,2,3,4,5,7);
							var str = box.slice(2,4,4,5,6,7);               
							=> str：3,4,5,7     //返回被替换的元素
						    	    box:1,2,4,5,6,7
						</pre>
					</li>
					<li><div class="font">Math.floor():向下取整</div>
						<div class="font">Math.random():产生0-1之间的随机数（取不到1，只能无限接近）</div>
						<pre class="example">
							取 0~5之间的整数
							Math.floor(Math.random()*6)；
							取 10~15之间的整数
							Math.floor(Math.random()*6+10)；
						</pre>
						
				</ul>
			</li>
		</ul>
	</div>
</div>
	
</body>
</html>